<template>
  <div class="menu">
    <div
      v-for="i in menu_arr"
      :key="i.id"
      :class="['item', currentUrl == i.href ? 'active' : '']"
      @click="jump(i.href)"
    >
      <img :src="currentUrl == i.href ? i.selsect_icon : i.icon" alt="" />
      <span>{{ i.name }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: ["currentUrl"],
  data() {
    return {
      currentTab: 1,
      menu_arr: [
        {
          id: 9,
          icon: require("@/assets/images/menu/icon6.png"),
          selsect_icon: require("@/assets/images/menu/icon6ed.png"),
          selsect_icon: "signin",
          href: "/signin",
          name: "签到管理",
        }
      ],
    };
  },
  methods: {
    jump(e) {
      this.$emit("setCurrentUrl", e);
      this.$router.push(e);
    },
  },
};
</script>
<style lang='less' scoped>
.menu {
  width: 100%;
  padding-top: 1.5625rem;
  img {
    width: 1rem;
    height: 1.125rem;
    margin-right: 0.625rem;
  }
}
.item {
  display: flex;
  align-items: center;
  color: #333333;
  height: 4.1875rem;
  padding: 1rem 3.25rem;
  box-sizing: border-box;
  color: #333333;
  cursor: pointer;
}
.active {
  background-color: var(--lightColor);
  color: #fd5151 !important;
}
</style>